<html>
  <title>
    Windows Live Messenger
  </title>
  <style>
    body { margin: 10px; font: 84% Arial, sans-serif; } h1 { font-size: 156%;
    } h1 img { margin: 1px 5px 0 1px; vertical-align: middle; } .titlemenu
    { margin-top: 12px; border-top: 1px solid #9CC2EF; background-color: #EBEFF9;
    padding: 3px; margin-bottom: 6px; } .titlemenu { font-weight: bold; } .titlemenu
    > a { font-weight: normal; float: right; } dl { padding: 0px 0px 0px 5px;
    overflow: auto; } dt { float: left; clear:left; width: 120px; font-weight:
    bold; } dt:after { content: ":"; } dd { float: left; margin: 0px 0px 20px
    0px; } dd ul { list-style: none; margin: 0px; padding: 0px; }
  </style>
  <script>
    function checkOptions() {
      if (options.messageSound.checked || options.onlineSound.checked) {
        options.volume.disabled = false;
        options.play.disabled = false;
      } else {
        options.volume.disabled = true;
        options.play.disabled = true;
      }
      if (options.messageAlert.checked) {
        options.alert.disabled = false;
      } else {
        options.alert.disabled = true;
      }
    }
    onload = function() {
      options.removeAd.checked = JSON.parse(localStorage.removeAd);
      options.messageAlert.checked = JSON.parse(localStorage.messageAlert);
      options.messageSound.checked = JSON.parse(localStorage.messageSound);
      options.volume.value = localStorage.volume;
      checkOptions();
      options.removeAd.onchange = function() {
        localStorage.removeAd = options.removeAd.checked;
      };
      options.messageAlert.onchange = function() {
        localStorage.messageAlert = options.messageAlert.checked;
        checkOptions();
      };
      options.messageSound.onchange = function() {
        localStorage.messageSound = options.messageSound.checked;
        checkOptions();
      };
      options.volume.onchange = function() {
        localStorage.volume = options.volume.value;
        chrome.extension.getBackgroundPage().messageSound.volume = localStorage.volume;
      };
    };

    function playMessageSound() {
      chrome.extension.getBackgroundPage().messageSound.load();
      chrome.extension.getBackgroundPage().messageSound.play();
    }

    function showMessageAlert() {
      var notification = webkitNotifications.createNotification("livemessenger.png", "Sender", "New Message");
      notification.show();
      setTimeout(function() {
        notification.cancel();
      }, 5000);
    }
  </script>
  <h1>
    <img src="livemessenger.png" alt="Windows Live Messenger" width=64 height=64>
    Windows Live Messenger
  </h1>
  <div class="titlemenu">
    Options
    <a href="https://chrome.google.com/extensions/detail/kpifmiaadiihnkolggaepacodfmgceki">Homepage</a>
  </div>
  <form id="options">
    <dl>
      <dt>
        Layout
      </dt>
      <dd>
        <input type="checkbox" name="removeAd" />
        Remove Ad
      </dd>
      <dt>
        Alerts
      </dt>
      <dd>
        <input type="checkbox" name="messageAlert" />
        Display alerts when a message is received
        <input type="button" name="alert" value="Test" onClick="showMessageAlert()">
        </input>
        <br>
        <input type="checkbox" name="onlineAlert" disabled/>
        Display alerts when contacts come online
      </dd>
      <dt>
        Sounds
      </dt>
      <dd>
        <input type="checkbox" name="messageSound" />
        New Message
        <input type="button" name="play" value="Play" onClick="playMessageSound()">
        </input>
        <br>
        <input type="checkbox" name="onlineSound" disabled />
        Contact Online
      </dd>
      <dt>
        Volume
      </dt>
      <dd>
        <input type="range" name="volume" style="width:100px" min=0 max=1 step=0.1
        />
      </dd>
    </dl>
  </form>

</html>